<!--
 * @Author       : 邱狮杰
 * @Date         : 2021-09-07 11:54:14
 * @LastEditTime : 2021-09-07 19:19:24
 * @FilePath     : /newhope/src/components/music/index.vue
 * @Description  : 
-->
<script setup lang='ts'>
import music from '/@/assets/images/music.png'
import zhongqiu from '/@/assets/mp3/zhongqiu.mp3'
import { onMounted, ref } from 'vue'
const audio = ref<HTMLAudioElement | null>(null)
const play = ref(true)
onMounted(() => {
	const ele: HTMLAudioElement = audio.value as HTMLAudioElement
	ele.addEventListener('canplay', () => {
		play.value = true
		ele.play()
	})
})
function playHandler() {
	const ele: HTMLAudioElement = audio.value as HTMLAudioElement
	if (ele.paused) {
		// 暂停状态，执行开始播放
		ele.play()
		play.value = true
	} else {
		ele.pause()
		play.value = false
	}
}
</script>
<template>
	<img @click="playHandler" :src="music" alt="music" :class="['music', play ? 'active' : '']" />
	<audio ref="audio" :src="zhongqiu" autoplay loop />
</template>

<style lang='scss' scoped>
.music {
	display: inline-block;
	position: absolute;
	top: 70px;
	right: 20px;
	height: 30px;
	width: 30px;
	z-index: 12;
}
.active {
	animation: rotating 2.5s linear infinite;
}
@keyframes rotating {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(360deg);
	}
}
</style>
